iT邦幫忙

2022 iThome 鐵人賽

DAY 2
0

Javascript究竟能耐在哪裡?

前面介紹了Javascript的定位及能做的事情,但就具體印象來說是蠻模糊的,究竟他在html、css、一個網頁間能改變哪些事物,做到怎麼樣的效果,接下來就簡單說明一些範例。

1. 更改Html內容

一個網頁裡的基石、內容就是Html,那透過我們的主角,可以很輕易地更改Html的內容。
透過 getElementById() 抓取Html元素,我們要先知道他的名子(id),知道後就可以更改內容(使用innerHtml)。

  <body>
    <p id="demo">哈囉,悲慘的世界</p>
    <button onclick="change()">按鈕</button>
  </body>

  <script>
    function change() {
      document.getElementById("demo").innerHTML = "哈囉,開心的世界";
    }
  </script>

當按鈕點擊後,觸發change函數,輕鬆將Html裡的內容改為"哈囉,開心的世界"。

2. 更改樣式(Css)

能夠改變Html、那Css當然也沒問題囉!

  <body>
    <p id="demo">哈囉,悲慘的世界</p>
    <button onclick="change()">按鈕</button>
  </body>

  <script>
    function change() {
      document.getElementById("demo").style.color = "blue";
    }
  </script>

透過.style.xxx(你想改變的屬性,例:color、fontsize、fontfamily)都可以輕易做到。
將文字顏色改成藍色~

3. 隱藏Html內容

我們很常會有將內容隱藏或顯示的需求,例如按下按鈕哪些表單要出現、要隱藏,這時候我們也可以使用Javascript去完成。

  <body>
    <p id="demo">哈囉,悲慘的世界</p>
    <button onclick="change()">按鈕</button>
  </body>

  <script>
    function change() {
      document.getElementById("demo").style.display = "none";
    }
  </script>

而顯示也很簡單,大概念都跟改變style屬性一樣!

  <body>
    <p id="demo">哈囉,悲慘的世界</p>
    <button onclick="change()">按鈕</button>
  </body>

  <script>
    function change() {
      document.getElementById("demo").style.display = "block";
    }
  </script>

認識完Javascript基礎能做到的事情後! 是不是比較有概念了呢?下一篇就讓我們介紹如何引入js吧


上一篇
Day1 Javascript前言
下一篇
Day3 Javascript宣告變數及變量
系列文
Javascripts惡補小教室30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言